<template>
  <div class="config" style="width: 100%; height: 100%; overflow: hidden">
    <config-grid :id="id" v-show="type === 'grid'" />
    <config-node :id="id" v-show="type === 'node'" />
    <config-edge :id="id" v-show="type === 'edge'" />
  </div>
</template>

<script>
import ConfigGrid from "./ConfigGrid/index.vue";
import ConfigNode from "./ConfigNode/index.vue";
import ConfigEdge from "./ConfigEdge/index.vue";
import FlowGraph from "../../graph";
import "./index.css";
export default {
  data() {
    return {
      type: "grid",
      id: "",
    };
  },
  components: {
    ConfigGrid,
    ConfigNode,
    ConfigEdge,
  },
  created() {
    this.boundEvent();
  },
  methods: {
    // 待优化
    boundEvent() {
      const { graph } = FlowGraph;
      graph.on("blank:click", () => {
        this.type = "grid"; // 点击空白处显示网格配置
      });
      graph.on("cell:mousedown", ({ cell }) => {
        this.type = cell.isNode() ? "node" : "edge"; // 点击节点或边时显示对应配置
        this.id = cell.id;
        // 如果是节点，根据是否有图片设置类型（图像节点或文本节点）
        if (this.type == "node") {
          console.log("cell", cell);
          let nodeType =
            cell["attrs"]["image"] && cell["attrs"]["image"]["xlink:href"]
              ? "image"
              : "text";
          this.$store.commit("flow/updatenodeType", nodeType);
          let nodeIsHead = cell["attrs"]["head"] ? true : false;
          this.$store.commit("flow/updateNodeIsHead", nodeIsHead); // 更新节点是否有头部
        }
      });
      graph.on("cell:dblclick", ({ cell, e }) => {
        const isNode = cell.isNode();
        const name = cell.isNode() ? "node-editor" : "edge-editor";
        cell.removeTool(name);
        cell.addTools({
          name,
          args: {
            event: e,
            attrs: {
              backgroundColor: isNode ? "#EFF4FF" : "transparent",
            },
          },
        });
      });
    },
  },
};
</script>
<style scoped>
.config {
  /* width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background: url("@/assets/bg.png") no-repeat center center;
  background-size: cover;
  z-index: 99999; */
}
</style>
